<template>
	<view>
		<view class="dialog" :class= "[showDialog ? 'dialog-show' : 'dialog-hidden']">
		  <view class="dialog_container">
			  <view class="textPart">
			  	<view class="log">
			  		<view class="logTxt">
			  			益信二手车
			  		</view>
			  		<view class="close-img" @tap="close_mask">
			  			<image src="../../static/image/close.png" mode=""></image>
			  		</view>
			  	</view>
			  	<view class="bgTxt">
			  		专业二手车买卖
			  	</view>
			  	<view class="smallTxt">
			  		严选好车，品质信赖
			  	</view>
			  </view>
			  <view class="inputPart">
			  	<view class="ipt phone">
			  		<input type="text" value="" placeholder="请输入用户名" v-model="username" @change='userchange'/>
			  		<view class="cleanIcon" :class="[isClean ? 'clean-show' : 'clean-hidden']">
			  			<image src="../../static/image/close.png" mode="" ></image>
			  		</view>
					<view @tap="getcode" :disabled="disabled" class="yan">
						{{codeTextShow == 0 ? codeText.getcode : (codeTextShow == 1 ? count + codeText.countDown : codeText.getAgain)}}
					</view>
			  	</view>
			  	<view class="ipt password">
			  		<input :type="passwordType" placeholder="请输入验证码" v-model="password" @change='pwdchange'/>
			  		
			  	</view>
			  	<button class="loginBtn" @click="login">登录</button>
			  </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showDialog: {
				type: Boolean,
				default: false
			},
			isShow: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				disabled:false,//禁止按钮点击
				codeText:{
					getcode:'获取验证码',
					countDown:'s重新验证',
					getAgain:'重新获取'
				},
				codeTextShow:0,//文字显示状态
				count:59 //倒计时
			
			};
		},
		methods:{
			//点击蒙层关闭弹窗
			close_mask(){
				uni.$emit("IsCloseLogin")
				// console.log('关闭')
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		// height: 100%!important;
		background-color: #FFFFFF;
	}
	.dialog{
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	.dialog_container {
		position: relative;
		// width: 100vw;
		width: 92%;
		margin: auto;
		height: 100vh;
		background-color: #FFFFFF;
		// transform: translateY(70%);
		transition: all 0.5s ease;
		z-index: 999;
		.textPart{
			width: 100%;
			height: 300upx;
			.log{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 70upx;
				.logTxt{
					font-weight: 550;
					font-size: 36upx;
					color: #FC7117;
					font-family: PingFangSC-light;
				}
				.close-img{
					width: 30upx;
					height: 30upx;
					image{
						width: 30upx;
						height: 30upx;
					}
				}
			}
			.bgTxt{
				font-size: 52upx;
				font-weight: 500;
				color: #5B5B5E;
				height: 100upx;
				line-height: 100upx;
			}
			.smallTxt{
				font-size: 28upx;
				color: #4F5152;
				height: 50upx;
				line-height: 50upx;
			}
		}
		.inputPart{
			.ipt{
				width: 100%;
				height: 80upx;
				margin-bottom: 10upx;
				border-bottom:1px solid #C6C6C6 ;
				input{
					width: 85%;
					height: 60upx;
					padding-bottom: 10upx;
					border: none;
				}
				.cleanIcon{
					position: absolute;
					top: 26%;
					left: 64%;
					margin-right: 4%;
					width: 30upx;
					height: 30upx;
					image{
						width: 30upx;
						height: 30upx;		
					}
				}
				.yan {
					position: absolute;
					top: 26%;
					right: 0;
					font-size: 28rpx;
					width: 120px;
					color: #565758;;
					border-radius: 5%;
					text-align: center;
					margin: auto;
				}
				
				
			}
			.phone{
				input{
					width: 62%;
				}
			}
			.loginBtn{
				width: 100%;
				height: 96upx;
				line-height: 96upx;
				background-image: linear-gradient(270deg,#F45E0B 0%,#FC9502 100%);
				border-radius: 16upx;
				color: white;
				margin:30upx 0 ;
			}
		}
		.login-button {
			margin-left: calc(50% - 170upx);
			margin-top: 20upx;
			width: 340upx;
			height: 80upx;
			border-radius: 40upx;
			text-align: center;
			font-size: 36upx;
			font-weight: 500;
			line-height: 80upx;
		}
		.by-login {
			background: #688EFB;
			color: #FFFFFF;
			bottom: 116px;
		}
		.tipline{
			width: 100%;
			height: 50upx;
			margin-top: 15upx;
			border-top: 1px solid #C8C7CC;
			text{
				color: #C8C7CC;
				line-height: 50upx;
				font-size: 20upx;
			}
		}
	} 
	.dialog-hidden{
	  display: none;
	}
	.dialog-show {
		.dialog_container {
			transform: translate(0%,0%);
		}
	} 

</style>
